<template>
    <view class="container" :style="themeColor">
        <header-bar :config="config"></header-bar>
        <view class="top">
            <image class="scanbg" src="../../static/scanbg.png"></image>
            <view class="store flex-start">
                <!-- 	<iconsfont customIcons="icon-dizhi" color="#fff" size="30"></iconsfont>
				<text class="name">小二上新(泉秀店)</text>
				<iconsfont customIcons="icon-xiayiji" color="#fff" size="30"></iconsfont> -->
            </view>
            <view class="coupon" @click="goUrl('/pages_scan/packet/go/coupon')">
                <view class="title">领券中心<text>神券天天领</text></view>
                <view>更多<iconsfont customIcons="icon-xiayiji" color="#fff" size="30"></iconsfont></view>
            </view>
            <scroll-view :scroll-x="true" scroll-with-animation :show-scrollbar="false">
                <view class="coupon_ul" @click="goUrl('/pages_scan/packet/go/coupon')">
                    <view class="coupon_li" v-for="(item, index) in couponList">
                        <view class="coupon_l" v-if="item.PrivilegeWay != 0">
                            <text>¥</text>
                            <text class="strong">{{ item.PrivilegeValue }}</text>
                            <!-- 		<text>~</text>
							<text class="strong">40</text> -->
                        </view>
                        <view class="coupon_l" v-if="item.PrivilegeWay == 0">
                            <text class="strong">{{ item.PrivilegeValue / 10 }}</text>
                            <text>折</text>
                            <!-- 		<text>~</text>
								<text class="strong">40</text> -->
                        </view>
                        <view class="coupon_r">
                            <view>{{ item.Name }}</view>
                            <text>满{{ item.OrderPrice }}元可用</text>
                            <text class="go">立即领取</text>
                        </view>
                    </view>
                    <view class="last"></view>
                </view>
            </scroll-view>
        </view>
        <view class="main">
            <view class="title"><text></text><text></text><view>操作指引</view><text></text><text></text></view>
        </view>
        <view class="stepmain">
            <view class="step">
                <image src="../../static/step1.png"></image>
                <text>扫一扫</text>
                <text>商品条形码</text>
            </view>
            <view class="dot">
                <text class="d1"></text>
                <text class="d2"></text>
                <text class="d3"></text>
            </view>
            <view class="step">
                <image src="../../static/step2.png"></image>
                <text>加入购物车</text>
                <text>核对商品</text>
            </view>
            <view class="dot">
                <text class="d1"></text>
                <text class="d2"></text>
                <text class="d3"></text>
            </view>
            <view class="step">
                <image src="../../static/step3.png"></image>
                <text>完成支付</text>
                <text>查看订单</text>
            </view>
        </view>
        <view class="sao" @click="scan()">
            <iconsfont customIcons="icon-saoyisao1" class="saoclass" color="#ffffff" size="120"></iconsfont>
            <text>扫条形码</text>
        </view>
        <view class="manual" @click="goUrl('/pages_scan/packet/go/inputBarCode')">手动输入条形码</view>
        <view class="menu">
            <view class="menu_li" @click="goUrl('/pages_scan/packet/cart/index')">
                <image src="../../static/car.png"></image>
                <view>
                    <view>购物车</view>
                    <text>加购一步买单</text>
                </view>
            </view>
            <view class="menu_li" @click="goMyOrder('-1')">
                <image src="../../static/order.png"></image>
                <view>
                    <view>我的订单</view>
                    <text>轻松记录购物</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { GetCouponCenterList, TakeCoupons } from "@/service/api/coupon.js"
import { AddScanBuyProductToCar } from "@/service/api/product.js"
import { getElementHeight } from "@/uni-sub-base/utils/elementUtil.js"
import storage from "@/uni-sub-base/utils/storage.js"
export default {
    components: {},
    data() {
        return {
            config: {
                title: "扫码购",
                back: true,
                color: ["#ffffff"],
                centerSlot: true,
                barPlaceholder: true,
            },
            couponList: [],
        }
    },
    created() {
        this.config.backgroundColor = [1, this.getThemeColor]
    },
    onShow() {
        this.GetCouponCenterList()
    },
    mounted() {},
    methods: {
        getData(page) {
            let param = this.param
            param.pageSize = page.size
            param.pageIndex = page.num
            getAccountList(param).then((res) => {
                if (res.State && res.Data) {
                    this.otherData = res.OtherData
                    this.mescroll.endBySize(res.Data.length, res.RecordAmout)
                    this.datas = this.datas.concat(res.Data)
                }
            })
        },
        GetCouponCenterList() {
            let param = {
                pageSize: 20,
                pageIndex: 1,
                buyType: 2,
                isOpenCouponCenter: 1,
            }
            GetCouponCenterList(param).then((res) => {
                if (res.State && res.Data.Data) {
                    this.couponList = res.Data.Data
                }
            })
        },
        goUrl(url) {
            this.easyGoTo(url)
        },
        //我的订单
        goMyOrder(state) {
            storage.setCache("orderType", state)
            // this.$emit("change",'order')
            this.goOrderPage()
        },
        scan() {
            let that = this
            //扫一扫
            // 允许从相机和相册扫码
            uni.scanCode({
                success: function (res) {
                    let path = "?SearchKey=" + res.result
                    AddScanBuyProductToCar(path).then((res) => {
                        if (res.State == 1) {
                            that.easyGoTo("/pages_scan/packet/cart/index")
                        } else {
                            that.easyToast(res.Msg)
                        }
                    })
                },
            })
        },
    },
}
</script>

<style lang="scss">
page {
    background: #fff;
}
.top {
    height: 374rpx;
    background: $app-color-main;
    position: relative;
    .scanbg {
        width: 750rpx;
        height: 216rpx;
        position: absolute;
        bottom: 0;
        left: 0;
    }
}
.store {
    padding: 30rpx 30rpx;
    .name {
        font-size: 32rpx;
        font-weight: bold;
        padding: 0 8rpx;
        color: #ffffff;
    }
}
.coupon {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0 24rpx;
    font-size: 24rpx;
    color: #fff;
    margin-bottom: 24rpx;
    .title {
        font-size: 32rpx;
        font-weight: bold;
        text {
            font-size: 24rpx;
            color: #fff;
            font-weight: normal;
            padding-left: 8rpx;
        }
    }
}
.coupon_ul {
    display: flex;
    padding: 0 24rpx;
    .coupon_li {
        height: 132rpx;
        background: #fff8ea;
        margin-right: 16rpx;
        flex-shrink: 0;
        position: relative;
        padding: 0 30rpx;
        display: flex;
        align-items: center;
        .coupon_l {
            display: flex;
            margin-right: 26rpx;
            text {
                color: #ef1f1f;
                font-weight: bold;
                margin-top: 8rpx;
            }
            .strong {
                margin-top: 0rpx;
                font-size: 52rpx;
                font-weight: bold;
            }
        }
        .coupon_r {
            font-size: 26rpx;
            font-weight: bold;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            text {
                font-weight: normal;
                display: block;
            }
            .go {
                width: 106rpx;
                height: 32rpx;
                line-height: 32rpx;
                background: linear-gradient(270deg, #f60139 0%, #ff4945 100%);
                border-radius: 20rpx;
                color: #fff;
                display: flex;
                justify-content: center;
                margin-top: 10rpx;
                font-size: 22rpx;
            }
        }
    }
    .coupon_li::before {
        content: " ";
        width: 0;
        height: 100%;
        width: 0;
        position: absolute;
        border-right: 16rpx dotted $app-color-main;
        top: 18rpx;
        left: -8rpx;
    }

    .coupon_li::after {
        content: " ";
        height: 100%;
        position: absolute;
        border-left: 16rpx dotted $app-color-main;
        top: 18rpx;
        right: -8rpx;
    }
    .last {
        width: 8rpx;
        height: 132rpx;
        flex-shrink: 0;
    }
}
.main {
    margin-top: -54rpx;
    background: #ffffff;
    border-radius: 40rpx 40rpx 0px 0px;
    position: relative;
    .title {
        display: flex;
        justify-content: center;
        font-size: 24rpx;
        align-items: center;
        padding-top: 54rpx;
        padding-bottom: 38rpx;
        view {
            padding: 0 12rpx;
        }
        text {
            width: 4rpx;
            height: 19rpx;
            margin: 0 5rpx;
            background: #16ad56;
            transform: skewX(-30deg);
        }
    }
}
.stepmain {
    padding: 0 82rpx;
    display: flex;
    justify-content: space-between;
    image {
        width: 112rpx;
        height: 112rpx;
        margin-bottom: 16rpx;
    }
    .step {
        display: flex;
        flex-direction: column;
        text-align: center;
    }
    .dot {
        height: 112rpx;
        display: flex;
        align-items: center;
        text {
            background: #b9c0d0;
            border-radius: 50%;
            margin: 0 6rpx;
        }
        .d1 {
            width: 8rpx;
            height: 8rpx;
        }
        .d2 {
            width: 6rpx;
            height: 6rpx;
        }
        .d3 {
            width: 4rpx;
            height: 4rpx;
        }
    }
}
.sao {
    width: 280rpx;
    height: 280rpx;
    border-radius: 50%;
    background: $app-color-main;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 74rpx auto 0 auto;
    .saoclass {
        margin-top: 60rpx;
        margin-bottom: 20rpx;
    }
    text {
        color: #fff;
    }
}
.manual {
    width: 276rpx;
    height: 72rpx;
    line-height: 72rpx;
    text-align: center;
    background: #f7f7f7;
    border-radius: 36rpx;
    font-size: 28rpx;
    margin: 24rpx auto 70rpx auto;
}
.menu {
    display: flex;
    justify-content: space-between;
    padding: 0 32rpx 16rpx 32rpx;
    image {
        width: 112rpx;
        height: 112rpx;
        margin: 24rpx 12rpx;
    }
    .menu_li {
        width: 324rpx;
        height: 160rpx;
        background: #ffffff;
        box-shadow: 0px 0px 18rpx 0rpx rgba(0, 0, 0, 0.1);
        border-radius: 12rpx;
        display: flex;
        & > view {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 160rpx;
            view {
                font-size: 32rpx;
                font-weight: bold;
                margin-bottom: 10rpx;
            }
            text {
                color: #999999;
            }
        }
    }
}
</style>
